<template>
    <div :class="className" :style="{ height: height, width: width }" />
  </template>
  
  <script>
  import * as echarts from 'echarts';
  require('echarts/theme/macarons'); // echarts theme
  import resize from './mixins/resize';
  
  export default {
    name: 'ProductionPieChart',
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '400px'
      },
      chartData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        chart: null
      };
    },
    watch: {
      chartData: {
        deep: true,
        handler() {
          this.initChart();
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart();
      });
    },
    beforeDestroy() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
    },
    methods: {
      initChart() {
        // 确保 chartData 和 seriesData 存在
        if (!this.chartData || !this.chartData.seriesData) return;
  
        // 如果图表实例已存在，先销毁
        if (this.chart) {
          this.chart.dispose();
        }
  
        // 初始化 ECharts 实例
        this.chart = echarts.init(this.$el, 'macarons');
  
        // 设置 ECharts 配置
        this.chart.setOption({
          title: {
            text: this.chartData.title || '产量分析',
            left: 'center',
            top: '5%',
            textStyle: {
              fontSize: 16,
              fontWeight: 'bold',
              color: '#333'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
            backgroundColor: 'rgba(255,255,255,0.9)',
            borderColor: '#eee',
            borderWidth: 1,
            textStyle: {
              color: '#333'
            }
          },
          legend: {
            orient: 'horizontal',
            left: 'center',
            bottom: '5%',
            data: this.chartData.seriesData.map(item => item.name),
            textStyle: {
              color: '#666'
            }
          },
          series: [
            {
              name: this.chartData.title || '产量分析',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: true,
                formatter: '{b}: {c} ({d}%)',
                color: '#333'
              },
              labelLine: {
                show: true,
                length: 10,
                length2: 15
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '16',
                  fontWeight: 'bold'
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              data: this.chartData.seriesData,
              color: ['#36a3f7', '#ffbf00'], // 蓝色和黄色
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        });
      }
    }
  }
  </script>